<template>
  <view class="order-manage">
    <!-- 顶部搜索及筛选区域 -->
    <view class="top-bar">
      <view class="search-box">
        <input class="search-input" placeholder="输入需要搜索的内容" v-model="searchKeyword"/>
        <view class="search-icon" @click="search">🔍</view>
      </view>
      <view class="filter-bar">
        <view class="total-count">共{{ orderList.length }}条</view>
        <view class="status-filter">
          <text>待服务</text>
          <image class="arrow-icon" src="/static/arrow-down.png"></image>
        </view>
      </view>
    </view>

    <!-- 订单列表区域 -->
    <view class="order-list">
      <view class="order-item" v-for="(item, index) in orderList" :key="index">
        <view class="order-header">
          <view class="order-id">订单号: {{ item.number }}</view>
          <view class="order-price">¥{{ item.price }}</view>
        </view>
        <view class="order-info">
          <view>下单用户: {{ item.userId }}</view>
          <view>预约时间: {{ item.reserveTime }}</view>
          <view>服务项目: {{ item.services }}</view>
          <view>下单时间: {{ item.orderTime }}</view>
        </view>
        <button class="detail-btn" @click="goDetail(item)">查看详情</button>
      </view>
    </view>
  </view>
</template>

<script>
	import {
		get,
		post,
		put
	} from '../../utils/request.js'
export default {
  data() {
    return {
      searchKeyword: "",
      orderList: [
        {
          orderId: "2021010831213",
          price: 500,
          userName: "张三丰",
          reserveTime: "2023-03-10 11:00",
          services: "宝马X5加装轮、清洁车辆、汽车美容",
          orderTime: "2022-10-12 11:09",
        },
        {
          orderId: "2021010831213",
          price: 500,
          userName: "张三丰",
          reserveTime: "2023-03-10 11:00",
          services: "宝马X5加装轮、清洁车辆、汽车美容",
          orderTime: "2022-10-12 11:09",
        },
        {
          orderId: "2021010831213",
          price: 500,
          userName: "张三丰",
          reserveTime: "2023-03-10 11:00",
          services: "宝马X5加装轮、清洁车辆、汽车美容",
          orderTime: "2022-10-12 11:09",
        },
      ],
    };
  },
  methods: {
    goDetail(item) {
      // 跳转详情页，可传递订单数据
      uni.navigateTo({
        url: `/pages/OrderDetail/OrderDetail?OrderData=${JSON.stringify(item)}`,
      });
    },
	search(){
		console.log(this.searchKeyword)
	}
  },
   async onLoad() {
  	 uni.setStorageSync('token','Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijg1YzZhNzRjLTNjMmItNDVhMi04ODNiLWU2YzYyNjRjYWMxZiIsInVzZXJuYW1lIjoiYWRtaW4ifQ.dX6R_EkZSxXvniaKw_FyBLQ8k7nSxnJVRR9JBz0dndok0kY_Rh6CbV5rW29NHTh-LI-fgm1LaJkhL1ci_4U1Gw')
  	const res=await get('/dev-api/orderManagement/border/getorderbymerchantid/'+uni.getStorageSync('merchant').id,{})
  	console.log(res)
	this.orderList=res
	for(let i=0;i<res.length;i++){
		const res1=await get('/dev-api/system/details_m/getDetailsByOrderId/'+res[i].id,{})
		console.log(res1.data)
	}
  }
};
</script>

<style scoped>
.order-manage {
 background-color: #f5f5f5;
  min-height: 100vh;
/*  padding: 10px; */
}

/* 顶部搜索及筛选 */
.top-bar {
  padding: 10px;
  background-color: #2979ff;
  height: 200rpx;
}
.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 5px 10px;
}
.search-input {
  flex: 1;
  height: 30px;
  font-size: 14px;
}
.search-icon {
  width: 20px;
  height: 20px;
}
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  color: #333;
}
.total-count {
  font-size: 14px;
  color: white;
}
.status-filter {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: white;
}
.arrow-icon {
  width: 12px;
  height: 12px;
  margin-left: 5px;
}

/* 订单列表 */
.order-list {
  margin-top: -30px;
  padding-left: 5%;
  padding-right: 5%;
  width: 90%;
}
.order-item {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.order-id {
  font-size: 14px;
  color: #333;
}
.order-price {
  font-size: 14px;
  color: #f00;
}
.order-info {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 8px;
}
.detail-btn {
  background-color: #007aff;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
}
</style>